<template>
  <div class="px-[8%]" id="div-1">
    <a-row :gutter="10" id="a-row-2">
      <a-col :span="14" id="a-col-3">
        <a-typography-link class="block h-full relative rounded-[6px] overflow-hidden" href="#" id="a-typography-link-4">
          <a-image width="100%" height="100%" :src="obj1.img" id="a-image-5"></a-image>
          <a-typography-paragraph class="!m-0 absolute bottom-6 left-0 px-[15px] w-full" id="a-typography-paragraph-6">
            <a-typography-title class="!text-[#fff]" :level="4" id="a-typography-title-7">{{ obj1.title }}</a-typography-title>
            <a-typography-paragraph class="text-[12px] text-[#fff] line-clamp-2 overflow-hidden text-ellipsis mt-[20px] !m-0" :ellipsis="{ rows: 2 }" :content="obj1.jieshao" id="a-typography-paragraph-8"></a-typography-paragraph>
          </a-typography-paragraph>
        </a-typography-link>
      </a-col>
      <a-col :span="10" id="a-col-9">
        <a-row :gutter="[10, 10]" id="a-row-10">
          <a-col :span="12" v-for="(item, index) in list1" :id="`a-col-11-${index}`">
            <a-typography-link class="flex h-full rounded-[4px] overflow-hidden border-[1px] border-solid border-[#d6d6d6]" href="#" :id="`a-typography-link-12-${index}`">
              <a-typography-paragraph class="!m-0 rounded-[4px] overflow-hidden w-[30%]" :id="`a-typography-paragraph-13-${index}`">
                <a-image width="100%" height="100%" :src="item.img" :id="`a-image-14-${index}`"></a-image>
              </a-typography-paragraph>
              <a-typography-paragraph class="px-[10px] flex-1 overflow-hidden !mb-0 py-[8px]" :id="`a-typography-paragraph-15-${index}`">
                <a-typography-paragraph class="!m-0" :id="`a-typography-paragraph-16-${index}`">{{ item.title }}</a-typography-paragraph>
                <a-typography-paragraph class="!my-[8px] text-[12px] text-[#999]" :id="`a-typography-paragraph-17-${index}`">{{ item.type }} | {{ item.gengxin }} | {{ item.pingfen }}</a-typography-paragraph>
                <a-typography-paragraph class="!m-0 text-[12px] text-[#999]" :ellipsis="{ rows: 2 }" :content="item.jieshao" :id="`a-typography-paragraph-18-${index}`"></a-typography-paragraph>
              </a-typography-paragraph>
            </a-typography-link>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row class="mt-[20px]" :gutter="10" id="a-row-19">
      <a-col :span="6" id="a-col-20">
        <a-typography-paragraph class="p-[15px] pb-0 h-full rounded-[6px] bg-[#fff2ff]" id="a-typography-paragraph-21">
          <a-typography-link class="!text-[#333] text-[20px] flex items-center font-bold" href="#" id="a-typography-link-22">动漫索引
            <RightOutlined class="text-[#333] text-[12px] ml-[5px] !font-bold" id="rightoutlined-23"></RightOutlined >
          </a-typography-link>
          <a-row class="pr-[40%] mt-[6px]" :gutter="10" id="a-row-24">
            <a-col :span="12" v-for="(item, index) in list2" :id="`a-col-25-${index}`">
              <a-typography-link class="block !text-[#333]" href="#" :id="`a-typography-link-26-${index}`">{{ item.title }}</a-typography-link>
            </a-col>
          </a-row>
        </a-typography-paragraph>
      </a-col>
      <a-col :span="6" id="a-col-27">
        <a-typography-paragraph class="p-[15px] pb-0 h-full rounded-[6px] bg-[#eefef6]" id="a-typography-paragraph-28">
          <a-typography-link class="!text-[#333] text-[20px] flex items-center font-bold" href="#" id="a-typography-link-29">类型风格
            <RightOutlined class="text-[#333] text-[12px] ml-[5px] !font-bold" id="rightoutlined-30"></RightOutlined >
          </a-typography-link>
          <a-row class="pr-[20%] mt-[6px]" :gutter="10" id="a-row-31">
            <a-col :span="6" v-for="(item, index) in list3" :id="`a-col-32-${index}`">
              <a-typography-link class="block !text-[#333]" href="#" :id="`a-typography-link-33-${index}`">{{ item.title }}</a-typography-link>
            </a-col>
          </a-row>
        </a-typography-paragraph>
      </a-col>
      <a-col :span="6" id="a-col-34">
        <a-typography-paragraph class="p-[15px] pb-0 h-full rounded-[6px] bg-[#eff8ff]" id="a-typography-paragraph-35">
          <a-typography-link class="!text-[#333] text-[20px] flex items-center font-bold" href="#" id="a-typography-link-36">首播时间
            <RightOutlined class="text-[#333] text-[12px] ml-[5px] !font-bold" id="rightoutlined-37"></RightOutlined >
          </a-typography-link>
          <a-row class="pr-[20%] mt-[6px]" :gutter="10" id="a-row-38">
            <a-col :span="6" v-for="(item, index) in list4" :id="`a-col-39-${index}`">
              <a-typography-link class="block !text-[#333]" href="#" :id="`a-typography-link-40-${index}`">{{ item.title }}</a-typography-link>
            </a-col>
          </a-row>
        </a-typography-paragraph>
      </a-col>
      <a-col :span="6" id="a-col-41">
        <a-typography-paragraph class="p-[15px] pb-0 h-full rounded-[6px] bg-[#fff0f0]" id="a-typography-paragraph-42">
          <a-typography-link class="!text-[#333] text-[20px] flex items-center font-bold" href="#" id="a-typography-link-43">热搜 </a-typography-link>
          <a-row class="pr-[20%] mt-[6px]" :gutter="10" id="a-row-44">
            <a-col :span="12" v-for="(item, index) in list5" :id="`a-col-45-${index}`">
              <a-typography-link class="block !text-[#333]" href="#" :id="`a-typography-link-46-${index}`">{{ item.title }}</a-typography-link>
            </a-col>
          </a-row>
        </a-typography-paragraph>
      </a-col>
    </a-row>
    <a-flex class="my-[20px] items-center" id="a-flex-47">
      <CalendarOutlined class="text-[#00abff] text-[12px]" id="calendaroutlined-48"></CalendarOutlined >
      <a-typography-text class="text-[16px] mx-[5px]" id="a-typography-text-49">新番时间表</a-typography-text>
      <a-typography-link class="!text-[#333] text-[13px]" href="#" id="a-typography-link-50">更多<RightOutlined class="text-[#999] text-[10px]" id="rightoutlined-51"></RightOutlined ></a-typography-link>
      <a-flex class="ml-[5px] border-[1px] border-solid border-[#e4e7ed] rounded-[20px]" id="a-flex-52">
        <a-typography-link :class="['px-[15px] rounded-[30px] !text-[#555]', { 'bg-[#f7f7f7] !text-[#0eb4ff]': index == 5 }]" href="#" v-for="(item, index) in dates" :id="`a-typography-link-53-${index}`">{{ item }}</a-typography-link>
      </a-flex>
      <a-flex class="flex-1 justify-end" id="a-flex-54">
        <a-typography-link href="#" id="a-typography-link-55"><LeftOutlined class="text-[#333] text-[12px]" id="leftoutlined-56"></LeftOutlined ></a-typography-link>
        <a-typography-text class="text-[#333] text-[15px] mx-[20px]" id="a-typography-text-57">1/9</a-typography-text>
        <a-typography-link href="#" id="a-typography-link-58"><RightOutlined class="text-[#333] text-[12px]" id="rightoutlined-59"></RightOutlined ></a-typography-link>
      </a-flex>
    </a-flex>
    <a-typography-paragraph class="!m-0 grid grid-cols-7 gap-x-[10px]" id="a-typography-paragraph-60">
      <a-typography-link v-for="(item, index) in list6" class="block w-full" href="#" :id="`a-typography-link-61-${index}`">
        <a-typography-paragraph class="!mb-[10px] rounded-[8px] overflow-hidden relative" :id="`a-typography-paragraph-62-${index}`">
          <a-image width="100%" :src="item.img" :id="`a-image-63-${index}`"></a-image>
          <a-typography-paragraph v-if="item.isNew" class="!m-0 absolute top-[10px] right-[10px] bg-[#ff5c5c] text-[#fff] w-[22px] text-center aspect-square rounded-[4px]" :id="`a-typography-paragraph-64-${index}`">新</a-typography-paragraph>
          <a-flex class="absolute bottom-[10px] right-[10px] items-center" :id="`a-flex-65-${index}`">
            <RightCircleOutlined class="text-[#fff] text-[12px]" :id="`rightcircleoutlined-66-${index}`"></RightCircleOutlined >
            <a-typography-text class="text-[#fff] text-[12px] ml-[5px]" :id="`a-typography-text-67-${index}`">{{ item.ji }}</a-typography-text>
          </a-flex>
        </a-typography-paragraph>
        <a-flex class="!m-0" :id="`a-flex-68-${index}`">
          <a-typography-text ellipsis class="flex-1 text-[#555]" :id="`a-typography-text-69-${index}`">{{ item.title }}</a-typography-text>
          <a-typography-text v-if="item.pingfen" class="text-[#ff972a]" :id="`a-typography-text-70-${index}`">{{ item.pingfen }}</a-typography-text>
        </a-flex>
      </a-typography-link>
    </a-typography-paragraph>
  </div>
</template>


<script setup>
const obj1 = {
  img: 'https://picsum.photos/id/100/1120/490',
  title: '再见龙盛，i集完结饿哦',
  jieshao:
    '放假哦额金佛忘记哦佛我 就佛教发票未开皮肤科啊可恶批发价哦啊金佛发挥湿热古井贡酒诶哦赶紧搜国际哦乳杆菌哦i就感觉几忘记佛哇积分澳际否文件发文件佛i阿哦额金佛忘记哦佛我 就佛教发票未开皮肤科啊可恶批发价哦啊金佛发挥湿热古井贡酒诶哦赶紧搜国际哦乳杆菌哦i就感觉几忘记佛哇积分澳际否文件发文件佛i阿哦额金佛忘记哦佛我 就佛教发票未开皮肤科啊可恶批发价哦啊金佛发挥湿热古井贡酒诶哦赶紧搜国际哦乳杆菌哦i就感觉几忘记佛哇积分澳际否文件发文件佛i阿哦额金佛忘记哦佛我 就佛教发票未开皮肤科啊可恶批发价哦啊金佛发挥湿热古井贡酒诶哦赶紧搜国际哦乳杆菌哦i就感觉几忘记佛哇积分澳际否文件发文件佛i阿忘记哦发',
};
const list1 = [
  {
    title: '2024造梦西游ol九游版',
    jieshao: '2024造梦西游ol九游版是一款在20',
    img: 'https://picsum.photos/id/101/110/155',
    type: '日本',
    gengxin: '第1集',
    pingfen: 8,
  },
  {
    title: '战争与文明九游最新版',
    jieshao: '战争与文明九游最新版是一款非常',
    img: 'https://picsum.photos/id/102/110/155',
    type: '日本',
    gengxin: '第7集',
    pingfen: 6.6,
  },
  {
    title: '道友请留步手游',
    jieshao: '道友请留步手游是一款非常好玩的',
    img: 'https://picsum.photos/id/103/110/155',
    type: '日本',
    gengxin: '第9集',
    pingfen: 6.8,
  },
  {
    title: '极无双手游',
    jieshao: '极无双下载是一款简单风趣的三国色发疯啊斗战胜佛树大招风体育教育甘苦与共哭二特殊钢电饭锅',
    img: 'https://picsum.photos/id/104/110/155',
    type: '日本',
    gengxin: '第17集',
    pingfen: 9.5,
  },
  {
    title: '各岗位服务费',
    jieshao: '有一天好几天二特务风格晚饭',
    img: 'https://picsum.photos/id/109/110/155',
    type: '日本',
    gengxin: '已完结',
    pingfen: 4.5,
  },
  {
    title: '照顾既然',
    jieshao: '关注下个人股啊分数大户人家今天然后他德国也好听多喝的反思潍坊市过几天有机统一激发',
    img: 'https://picsum.photos/id/106/110/155',
    type: '日本',
    gengxin: '已完结',
    pingfen: 9.6,
  },
];
const list2 = [
  {
    title: '更新时间',
  },
  {
    title: '最高评分',
  },
  {
    title: '播放数量',
  },
];
const list3 = [
  {
    title: '冒险',
  },
  {
    title: '奇幻',
  },
  {
    title: '小说改',
  },
  {
    title: '动态漫',
  },
  {
    title: '热血',
  },
  {
    title: '战斗',
  },
  {
    title: '漫画改',
  },
];
const list4 = [
  {
    title: '2024',
  },
  {
    title: '2023',
  },
  {
    title: '2022',
  },
  {
    title: '2021',
  },
  {
    title: '2020',
  },
  {
    title: '2019',
  },
  {
    title: '2018',
  },
  {
    title: '2017',
  },
];
const list5 = [
  {
    title: '不是轻松',
  },
  {
    title: '啊微服务',
  },
  {
    title: '改色如果',
  },
  {
    title: '隔热过几天',
  },
];
const dates = ['周一', '周二', '周三', '周四', '今日', '周六', '周日'];
const list6 = [
  {
    img: 'https://picsum.photos/id/110/195/275',
    title: '合同好突然',
    isNew: false,
    ji: '第10集',
    pingfen: '6',
  },
  {
    img: 'https://picsum.photos/id/111/195/275',
    title: '娃儿而',
    isNew: false,
    ji: '第14集',
    pingfen: '6.9',
  },
  {
    img: 'https://picsum.photos/id/112/195/275',
    title: '特尔让他儿童',
    isNew: true,
    ji: '第60集',
    pingfen: '8.6',
  },
  {
    img: 'https://picsum.photos/id/113/195/275',
    title: '威风威风王凤伟',
    isNew: true,
    ji: '第965集',
    pingfen: '',
  },
  {
    img: 'https://picsum.photos/id/114/195/275',
    title: '福娃恶风',
    isNew: true,
    ji: '第21集',
    pingfen: '5.8',
  },
  {
    img: 'https://picsum.photos/id/115/195/275',
    title: '啊额服务行业退还给热歌',
    isNew: true,
    ji: '第587集',
    pingfen: '9.4',
  },
  {
    img: 'https://picsum.photos/id/116/195/275',
    title: '个人感受隔热管',
    isNew: false,
    ji: '第66集',
    pingfen: '',
  },
];
</script>
<style scoped></style>